{extend name="base:base-add" /}
{block name="style"}
{/block}
{block name="title"}
<title>编辑下载文件地址</title>

<style>
    .Hui-admin-page-container, .panel, .panel-body {
        height: 100%;
    }
    .panel-header {
        text-align: center;
    }
    .panel-body {
        display: flex;
        border: 1px solid #eaeaea;
    }
    /* 侧边栏 */
    .panel-body-aside {
        float: left;
        width: 20%;
        padding-right: 20px;
    }

    .Huifold .item{ position:relative}
    .Huifold .item .active {display: block!important;}
    .Huifold .item h4{margin:0;font-weight:bold;position:relative;border-top: 1px solid #fff;font-size:15px;line-height:22px;padding:7px 10px;background-color:#eee;cursor:pointer;padding-right:30px}
    .Huifold .item h4 b{position:absolute;display: block; cursor:pointer;right:10px;top:7px;width:16px;height:16px; text-align:center; color:#666}
    .Huifold .item .info{display:none;padding:10px}
    .Huifold .item a { color: #333; line-height: 20px; }
    .Huifold .second-menu .active a { color: #0a6999; text-decoration: underline; }
    .Huifold .second-menu .second-item .item-edit { display: none; }
    .Huifold .second-menu .second-item:hover .item-edit { color: #0a6999; display: inline-block; text-decoration: none; }

    /* 主体容器 */
    .panel-body-main {
        float: left;
        width: 80%;
        padding: 0 20px;
        border-left: 1px solid #eaeaea;

    }
    /* 主体内容布局 */
    .main-box .main-item {
        float: left;
        width: 125px;
        text-align: center;
        border: 1px solid transparent;
        margin: 5px;
        padding: 5px;
        cursor: pointer;
        font-size: 12px;
        color: #545454;
    }
    .main-box .main-item:hover,
    .main-box .active{
        border: 1px solid #19968a;
    }
    .main-box .main-item .img-box {
        position: relative;
        width: 125px;
        height: 120px;
    }
    .main-box .main-item img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100px;
        max-height: 120px;
    }
    .main-box .main-item p {
        width: 100%;
        margin: 5px 0 0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    /* 分页 */
    .g-page {
        margin-top: 20px;
    }
    .g-page ul:before,
    .g-page ul:after {
        content: "";
        display: table;
        zoom: 1;
    }
    .g-page ul:after {
        clear: both;
    }
    .g-page li {
        float: left;
    }
    .g-page li.disabled{
        cursor: not-allowed;
    }
    .g-page li.disabled span {
        color: #777;
        border-color: #ddd!important;
    }
    .g-page li.active {
        cursor: default;
        background: #00b7ee;
    }
    .g-page li.active span {
        color: #fff;
    }
    .g-page li a {
        color: #00b7ee;
    }
    .g-page li a:hover {
        background: #eaeaea;
        text-decoration: none;
    }
    .g-page li a,
    .g-page li span {
        display: block;
        padding: 6px 12px;
        border: 1px solid #00b7ee;
        border-right: 1px solid transparent;
    }
    .g-page li:nth-last-of-type(1) a,
    .g-page li:nth-last-of-type(1) span {
        border-right: 1px solid #00b7ee;
    }
</style>

{/block}
{block name="form"}
<div class="panel">
    <div class="panel-header">
        <div style="float: left">
            <a href="javascript:;" onclick="min_layer('添加分类','{:url(\'attachment_category\')}',window.parent)" class="btn btn-primary" >创建分类</a>
        </div>
        <div>
            <button class="apply btn disabled">应用</button>
            <button class="delete btn disabled">删除</button>
            <a href="javascript:void(0);" class="btn btn-primary" onclick="mu_layer('上传文件','{:url(\'attachment_upload\',[\'parent_id\'=>$id])}',window.parent)">上传</a>
        </div>
    </div>
    <div class="panel-body">
        <div class="panel-body-aside">
            <ul id="Huifold1" class="Huifold first-menu">
                {notempty name="tree"}
                {volist name="tree" id="vo"}
                <li class="item first-item">
                    <h4 href="#">{$vo.name} <b>+</b></h4>
                    <ul class="info second-menu">
                        {notempty name="vo.child"}
                        {volist name="vo.child" id="lo"}
                        <li class="second-item p{$lo.id}">
                            <a class="item-link" href="{:url('attachment_list',['parent_id'=>$lo.id])}">{$lo.name}</a>
                            <a class="item-edit" href="javascript:void(0) ;"  onclick="min_layer('编辑分类','{:url(\'attachment_edit_category\',[\'id\'=>$lo.id])}',window.parent)">&nbsp;&nbsp;<i class="Hui-iconfont">&#xe6df;</i></a>
                        </li>
                        {/volist}
                        {/notempty}
                    </ul>
                </li>
                {/volist}
                {/notempty}
            </ul>
            <ul id="Huifold2" class="Huifold first-menu">
                <li><a href="{:url('attachment_list')}">所有</a></li>
            </ul>
        </div>
        <div class="panel-body-main">
            <div class="main-box clearfix">
                {notempty name="$data"}
                {volist name="data" id="vo"}
                <div class="main-item">
                    <div class="img-box">
                        {switch name="vo.ext"}
                        {case zip|rar|7z|bin}
                        <img src="//dev.iqs.link/icon/zip.png" alt="" data-url="{$vo.path}" data-id="{$vo.id}">
                        {/case}
                        {case mp4}
                        <img src="//dev.iqs.link/icon/video.png" alt="" data-url="{$vo.path}" data-id="{$vo.id}">
                        {/case}
                        {default /}
                        <img src="//dev.iqs.link/icon/files.png" alt="" data-url="{$vo.path}" data-id="{$vo.id}">
                        {/switch}
                    </div>

                    <p title="{$vo.name}">{$vo.name}</p>
                </div>
                {/volist}
                {/notempty}
            </div>

            <div class="g-page">
                {notempty name="page"}
                {$page|raw}
                {/notempty}
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript" src="__ADMIN__/business/js/main.js"></script>
<script type="text/javascript" src="__LIB__/webuploader/0.1.5/webuploader.js"></script>
<script>

    /*管理员-编辑*/
    function edit(title, url) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url,
            area: ['800px', '600px']
        });
    }
    function del(obj, id) {
        layer.confirm('确认要删除吗？,同时aws上的文件也会被删除，不用担心垃圾过多！', function (index) {
            var postData = {};
            postData['id'] = id;
        });
    }

    //h-ui侧边栏插件js
    jQuery.Huifold = function(obj,obj_c,speed,obj_type,Event){
        if(obj_type === 2){
            $(obj+":first").find("b").html("-");
            $(obj_c+":first").show()}
        $(obj).bind(Event,function(){
            if($(this).next().is(":visible")){
                if(obj_type === 2){
                    return false}
                else{
                    $(this).next().slideUp(speed).end().removeClass("selected");
                    $(this).find("b").html("+")}
            }
            else{
                if(obj_type === 3){
                    $(this).next().slideDown(speed).end().addClass("selected");
                    $(this).find("b").html("-")}else{
                    $(obj_c).slideUp(speed);
                    $(obj).removeClass("selected");
                    $(obj).find("b").html("+");
                    $(this).next().slideDown(speed).end().addClass("selected");
                    $(this).find("b").html("-")}
            }
        })}
    $(function(){
        $.Huifold("#Huifold1 .item h4","#Huifold1 .item .info","fast",3,"click"); /*5个参数顺序不可打乱，分别是：响应区,隐藏显示的内容,速度,类型,事件*/
        //选中一个项目后给按钮传递参数
        $('.main-item').click(function (e){
            e.stopPropagation();
            var url = $(this).find('img').attr('data-url');
            var data_id=$(this).find('img').attr('data-id');
            $(this).addClass('active');
            $(this).siblings('.main-item').removeClass('active');
            $('.apply').removeClass('disabled').addClass('btn-success').attr('data-url',url);
            $('.delete').removeClass('disabled').addClass('btn-danger').attr('data-id',data_id);
        });
        $(document).click(function (){
            $('.main-item').removeClass('active');
            $('.apply').removeClass('btn-success').addClass('disabled');
        });
        var index = parent.layer.getFrameIndex(window.name);
        //点应用时出发子向父传值
        $('.apply').click(function (){
            var url = $(this).attr('data-url');
            window.sessionStorage.setItem('attachmentUrl', url)
            parent.layer.close(index);
        });
        var test='.p'+'{$id}';
        $(test).addClass('active');
        $(test).parent('.second-menu').addClass('active');
        $('.delete').click(function (){
           var postData ={};
            postData['id']= $(this).attr('data-id');
            var url = '{:url(\'attachment_delete\')}';
            //ajax 请求删除
            $.ajax({
                url: url,
                type: "post",
                data: postData,
                "success": function (result) {
                    console.log(result);
                    var msgData = JSON.parse(result);
                    if (msgData.status === true) {
                        $(this).remove();
                        layer.msg(msgData.message, {icon: 1, time: 1000});
                    } else {
                        layer.msg(msgData.message, {icon: 5, time: 2000})
                    }
                }
            }, JSON);
        });
    });
</script>
{/block}